<template>
    <div class="options-feedback">
         <!-- 头部 -->
        <van-nav-bar
            title="意见与反馈"           
            left-arrow
            right-text="提交"
            @click-left="onClickLeft"
            placeholder
            fixed          
        />
        <main>
            <!-- 反馈消息 -->
            <div class="feedback">  
                
                <textarea placeholder="请输入您的宝贵意见与建议，我们将不断优化" v-model="aaa"></textarea>
                <div class="word-limit">{{length||0}}/225</div>
            </div>
            <!-- 上传图片 -->
            <div class="upload-picture">
                <div class="title">
                    <p>图片（选填，提供问题截图）</p>
                    <span>{{picLength || 0}}/4</span>
                </div>
                <!-- 上传 -->
                <div class="upload">
                      <van-uploader v-model="fileList" multiple :max-count="4" />
                </div>             
            </div>            
        </main>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            aaa:'',
            fileList: [],
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        }
    },
    computed: {
        length(){
            return this.aaa.length
        },
        picLength(){
            return this.fileList.length
        }
    },
}
</script>
<style lang="stylus" >
    .options-feedback
         display flex
         flex-direction column
         align-items center 
         .van-nav-bar .van-icon
            color #4e4e4e
            font-size 16px
         .van-nav-bar__title
            font-size 18px
            color #494949
            line-height 25px
        .van-nav-bar__right span
            color #494949
            font-size 15px
        main
            position absolute
            top 46px
            left 0
            // flex 1
            height 620px
            width 100%
            background #f4f4f4
            .feedback
                width 340px
                height 225px
                border 1px solid #e8e8e8
                margin 17px auto 10px
                position relative
                textarea
                    // display block
                    width: 319px;
                    height: auto;
                    font-size: 18px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;                  
                    line-height: 25px;
                    margin 10px 10px 0
                    outline none
                    background #f4f4f4
                    border none
                    
              
                .word-limit                   
                    font-size: 14px;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    font-weight: 500;
                    color: #BCBCBC;
                    line-height: 20px;
                    position absolute
                    bottom 20px
                    right 17px
            .upload-picture
                width 100%
                .title
                    padding 0 18px
                    display flex
                    align-items center
                    justify-content space-between
                    margin-bottom 12px
                    p                       
                        font-size: 16px;
                        font-family: PingFang-SC-Heavy, PingFang-SC;
                        font-weight: 800;
                        color: #464646;
                        line-height: 22px;
                    span                        
                        font-size: 12px;
                        font-family: PingFang-SC-Medium, PingFang-SC;
                        font-weight: 500;
                        color: #BCBCBC;
                        line-height: 17px;
                .upload
                     padding 0 18px
                     .van-uploader__wrapper
                         border 2px dashed #ccc
                        .van-uploader__upload
                            background #f4f4f4
</style>